<!DOCTYPE html>
<html>
    <head>
	    <meta charset = "utf-8">
		<title>2018031701040.蔡妙格cc</title> 
		<!--网页名字-->
	</head>
	
	<body>
	    <canvas id="webgl" width="512" height="512">
		<!--获取画布  若失败则显示以下语句-->
        对不起，您的浏览器不支持HTML5的canvas元素！
		</canvas>
		</br><!--换行-->
	<div>
		<button id = "IncSpeed">加速</button>
		<button id = "OutcSpeed">减速</button>
		
		正方形颜色：
		<select id = "ColorMenu" size = "3">
			<option value = "0">白色</option>
			<option value = "1">红色</option>
			<option value = "2">绿色</option>
			<option value = "3">蓝色</option>
		</select>
		</br>
		注意：
		</br>
		如果视口没有自适应浏览器大小，可以重新放大/缩小浏览器
		</br>
		（我电脑上需要重新放大或缩小才能出现自适应）
	</div>
	
		<!--顶点shader程序-->
		<script id ="vertex-shader" type ="x-shader/x-vertex">
		attribute vec2 a_Position;   //顶点位置属性
		uniform mat4 u_matProj;    //投影矩阵
		uniform float u_Angle;     //旋转角度
		//attribute vec3 a_Color;   //顶点颜色属性
		//varying vec4 v_Color;     //输出顶点颜色属性
		void main()
		{
		    //gl_Position = vec4(a_Position,0.0,1.0);
			//gl_Position = a_Position;
			//v_Color = vec4(a_Color,1.0);
			vec4 pos = vec4(a_Position,0,1);
			float rad = radians(u_Angle);
			pos.x = a_Position.x*cos(rad) - a_Position.y*sin(rad);
			pos.y = a_Position.x*sin(rad) + a_Position.y*cos(rad);
			gl_Position = u_matProj*pos;
		}
		</script>
		
		<!--片元shader程序-->
		<script id="fragment-shader" type = "x-shader/x-fragment">
		precision mediump float;   //浮点数精度
		uniform vec3 u_Color;
		void main()
		{
		    gl_FragColor = vec4(u_Color,1.0); //片元颜色（r，g，b，透明度）
			//gl_FragColor = vec4(0.98,0.5,0.44,0.5);   //指定片元颜色
		}
		</script>
		
		<!--编写程序必要的三个辅助程序js-->
		<script type="text/javascript" src="./Common/webgl-utils.js">
		</script>
		
		<script type="text/javascript" src="./Common/initShaders.js">
		</script>
		
		<script type="text/javascript" src="./Common/MV.js">
		</script>
		
        <script type="text/javascript" src="40CMG_4Animation.js">
		</script>

	</body>
</html>